import React, { PureComponent } from "react";

// import connect from "../utils/connect"
import { connect } from "react-redux";

import { 
  addAction,
  changeHomeMultiAction
} from "../store/actionCreators";

class Home extends PureComponent {  
  
  componentDidMount() {
    this.props.getHomeMultidata()
  }

  render() {
    return (
      <div>
        <h1>Home3</h1>
        <h2>当前计数：{this.props.counter}</h2>
        <button onClick={e => this.props.increment()}>+1</button>
        <button onClick={e => this.props.addNumber(5)}>+5</button>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    counter: state.counter
  }
}

const mapDispatchToProps = dispatch => {
  return {
    increment() {
      dispatch(addAction(1))
    },
    addNumber(num) {
      dispatch(addAction(num))
    },
    getHomeMultidata() {
      //这里传入是函数 这个函数会被主动调用  而不是传入调用它返回的对象
      dispatch(changeHomeMultiAction)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)